<template>
  <div class="app-container">
    <!--    功能-->
    <el-row class="k-mt-10">
      <el-col :span="23">
        <el-button type="warning" @click="handleHeaderAssign">批量指派</el-button>
        <el-button icon="el-icon-download" type="warning" @click="handleHeaderExport">导出</el-button>
      </el-col>
    </el-row>
    <!--    查询条件-->
    <el-row class="filter k-mt-10">
      <el-col :span="24" class="k-text-left k-lh-2-2">

        <span>工单编号：</span>
        <el-input v-model="WHERE.caseNo" class="input padding-right-10" />

        <span>工单标题：</span>
        <el-input v-model="WHERE.caseTitle" class="input padding-right-10" />

        <span>报告编号：</span>
        <el-input v-model="WHERE.caseTitle" class="input padding-right-10" />

        <span>机构：</span>
        <el-select v-model="WHERE.orgId" class="select  padding-right-10">
          <el-option
            v-for="(item,index) in ORGLIST"
            :key="'ORGLIST' + index"
            :label="item.name"
            :value="item.value"
          />
        </el-select>

        <span>设备号：</span>
        <el-input v-model="WHERE.deviceId" class="input padding-right-10" />
        <span>处理人：</span>
        <el-input v-model="WHERE.handleUserName" class="input padding-right-10" />
        <span>工单状态：</span>
        <el-select
          v-model="WHERE.caseStatus"
          class="select  padding-right-10"
        >
          <el-option
            v-for="(item,index) in CASE_STATUS"
            :key="'CASE_STATUS' + index"
            :label="item.name"
            :value="item.value"
          />
        </el-select>

        <span>用户：</span>
        <el-input v-model="WHERE.userName" class="input padding-right-10" />
        <span>创建时间：</span>
        <el-date-picker
          v-model="WHERE.createDate"
          class="margin-right-10"

          type="date"
          value-format="yyyy-MM-dd"
        />

        <el-button type="primary" @click="_search">查询</el-button>
        <el-button type="primary" @click="_reset">重置</el-button>
      </el-col>
    </el-row>
    <!--    表格-->
    <el-table
      ref="tb"
      v-loading="LOADING"
      :data="TABLE_DATA"
      :size="SIZE"
      border
      height="calc(100vh - 330px)"
      style="width: 100%"
      @selection-change="_handleSelectionChange"
    >
      <el-table-column
        type="selection"
        width="55"
      />
      <template v-for="(item) in setting">
        <el-table-column
          v-if="item.key === 'action'"
          :key="item.id"
          :label="item.name"
          :prop="item.key"
          :width="item.value"
          :fixed="item.fixed"
        >
          <template slot-scope="scope">
            <el-button @click="handleOrder(scope.row)">处理工单</el-button>
            <el-button>已处理</el-button>
          </template>

        </el-table-column>
        <el-table-column
          v-else
          :key="item.id"
          :label="item.name"
          :prop="item.key"
          :width="item.value"
        />
      </template>
    </el-table>
    <!--    分页-->
    <pagination />
    <!--    弹窗-->

    <!--批量指派弹窗-->
    <el-dialog
      :visible.sync="assignVisible"
      title="批量指派"
      width="30%"
    >
      <div>
        <span class="k-mr-30">指派</span>
        <el-select v-model="assignId" filterable placeholder="请选择">
          <el-option
            v-for="(item,index) in ALL_STAFF_LIST"
            :key="'assign'+index"
            :label="item.name"
            :value="item.value"
          />
        </el-select>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cancelHeaderAssign">取 消</el-button>
        <el-button :loading="HANDLE_LOADING" type="primary" @click="doHeaderAssign">确 定</el-button>
      </span>
    </el-dialog>
    <!--导出弹窗-->
    <el-dialog
      :visible.sync="exportVisible"
      title="请选择导出类型"
      width="30%"
    >
      <div>
        <span class="k-mr-30">导出</span>
        <el-select v-model="exportType" class="select-width-200" placeholder="请选择">
          <el-option label="导出选中数据" value="column" />
          <el-option label="导出月数据" value="month" />
        </el-select>

      </div>
      <div v-if="exportType==='month'" class="k-mt-10">
        <span class="k-mr-30">月份</span>
        <el-date-picker
          v-model="exportMonth"
          class="select-width-200"
          placeholder="选择月"
          value-format="yyyy-MM"
          type="month"
        />
      </div>
      <div v-if="exportType==='month'" class="k-mt-10">
        选择月份数据导出时，开始、结束时间条件无效。
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cancelHeaderExport">取 消</el-button>
        <el-button :loading="EXPORT_LOADING" type="primary" @click="doHeaderExport">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import list from '@/list'
import organization from '@/list/organization'
import workorder from '@/list/workorder'
import DeepInterpretationOrderClass from '@/models/jurisdiction-class'
import { exportWorkOrderByIds, exportWorkOrderByMonth, moreAssign } from '@/api/work-order'
import { download } from '@/utils/url'
const deepInterpretationOrderClass = new DeepInterpretationOrderClass()
export default {
  name: 'DeepInterpretationOrder',
  mixins: [workorder, organization, list],
  data() {
    return {
      caseRequestURLType: '',
      setting: deepInterpretationOrderClass.list(),
      WHERE: {
        caseRequestURLType: '', // 访问类型
        caseNo: '', // 工单编号
        caseTitle: '', // 工单标题
        caseTitle2: '', // 报告编号
        orgId: '', // 机构
        deviceId: '', // 设备号
        handleUserName: '', // 处理人
        status: '', // 用户
        createDate: '' // 创建时间
      },
      PROTECT_WHERE: ['caseRequestURLType'],
      assignId: '',
      assignVisible: false,
      exportType: '',
      exportMonth: '',
      exportVisible: false
    }
  },
  mounted() {
    this._getDepartmentList()
    this.setVisitType()
  },
  methods: {
    /**
     * 判断入口类型加载不同的查询
     */
    setVisitType() {
      const visitType = this.$route.name
      const pre = 'DeepInterpretationOrder'
      console.log('类型', visitType)
      let caseRequestURLType = ''
      switch (visitType) {
        case pre + 'un-handle':
          caseRequestURLType = 'UN_HANDLE'
          break
        case pre + 'handle':
          caseRequestURLType = 'HANDLE'
          break
        case pre + 'un-submit':
          caseRequestURLType = 'UN_SUBMIT'
          break
        case pre + 'closed':
          caseRequestURLType = 'CLOSED'
          break
        case pre + 'all':
          caseRequestURLType = 'ALL'
          break
      }
      this.caseRequestURLType = caseRequestURLType
      this.WHERE.caseRequestURLType = caseRequestURLType
    },
    /**
     * 处理工单
     */
    handleOrder(item) {
      console.log('处理工单', item)
    },
    /**
     * 批量指派
     */
    handleHeaderAssign() {
      console.log('批量指派工单给公司员工', this.SELECTlIST)
      if (this.SELECT_lIST.length > 0) {
        this.assignVisible = true
      } else {
        this.$message.warning('请选择一条记录')
      }
    },
    /**
     * 执行指派
     */
    doHeaderAssign() {
      if (!this.assignId) {
        this.$message.warning('请选择指派用户')
        return
      }
      let workOrderIds = ''
      this.SELECT_lIST.forEach(item => {
        workOrderIds += item.id + ','
      })
      this.HANDLE_LOADING = true
      console.log('执行批量指派工单给公司员工', this.assignId, workOrderIds)
      moreAssign(workOrderIds, this.assignId).then(res => {
        console.log('指派结果', res)
        if (res.code === OKCODE) {
          this.HANDLE_LOADING = false
          this.cancelHeaderAssign()
          this.$message.success('指派成功')
        } else {
          this.HANDLE_LOADING = false
          this.$message.success(res.message)
        }
      })
    },
    /**
     * 取消指派
     */
    cancelHeaderAssign() {
      this.HANDLE_LOADING = false
      this.assignId = ''
      this.assignVisible = false
      this._getList()
    },
    /**
     * 导出
     */
    handleHeaderExport() {
      console.log('导出')
      this.exportVisible = true
    },
    /**
     * 执行导出
     */
    doHeaderExport() {
      console.log('执行导出')
      if (this.exportType === 'column') {
        if (this.SELECT_lIST.length === 0) {
          this.$message.warning('至少选择一条记录')
          return
        }
        let ids = ''
        this.SELECT_lIST.forEach(v => {
          ids += v.id + ','
        })
        console.log('导出ID', ids)
        this.EXPORT_LOADING = true
        exportWorkOrderByIds(ids).then(res => {
          console.log('导出选中', res)
          this.EXPORT_LOADING = false
          if (res.code === OKCODE) {
            this.cancelHeaderExport()
            this.$message.success('导出成功')
            download(res.data)
          } else {
            this.$message.success(res.message)
          }
        })
      } else {
        if (this.exportMonth === '') {
          this.$message.warning('请选择月份')
          return
        } else {
          const where = this.PARAMS
          where['dateMonth'] = this.exportMonth
          this.EXPORT_LOADING = true
          exportWorkOrderByMonth(where).then(res => {
            console.log('导出结果', res)
            this.EXPORT_LOADING = false
            if (res.code === OKCODE) {
              this.cancelHeaderExport()
              this.$message.success('导出成功')
              download(res.data)
            } else {
              this.$message.success(res.message)
            }
          })
        }
      }
    },
    /**
     * 取消导出
     */
    cancelHeaderExport() {
      console.log('取消导出')
      this.exportType = 'column'
      this.exportMonth = ''
      this.EXPORT_LOADING = false
      this.exportVisible = false
    }
  }
}
</script>
